<template>
	<view>
		<fui-bottom-popup :show="show" @close="closePopup">
			<view class="keyboard_cotainer"
				style="box-sizing: border-box;display: flex;flex-direction: column;background-color: white;">
				<div style="display: flex;flex-direction: column;padding: 8rpx 32rpx;">
					<div
						style="display: flex;flex-direction: row;justify-content: space-between;width: 100%;font-size: 42rpx;">
						<fui-radio-group name="radio" v-model="count" @change="change" style="width: 100%;">
							<view class="fui-align__center">
								<fui-radio value="1" checked></fui-radio>
								<text style="margin-left: 16rpx;font-size: 42rpx;flex: 1;" class="fui-text">成绩一</text>
								<span style="font-size: 40rpx;">{{getScoreByCount(1)==null?' ':getScoreByCount(1).rawScore}}</span>
							</view>
							<view class="fui-align__center">
								<fui-radio value="2" checked></fui-radio>
								<text style="margin-left: 16rpx;font-size: 42rpx;flex: 1;" class="fui-text">成绩二</text>
								
								<span style="font-size: 40rpx;">{{getScoreByCount(2)==null?' ':getScoreByCount(2).rawScore}}</span>
							</view>
							<view class="fui-align__center">
								<fui-radio value="3" checked></fui-radio>
								<text style="margin-left: 16rpx;font-size: 42rpx;flex: 1;" class="fui-text">成绩三</text>
								<span style="font-size: 40rpx;">{{getScoreByCount(3)==null?' ':getScoreByCount(3).rawScore}}</span>
							</view>
						</fui-radio-group>
						<div style="display: flex;flex-direction: column;justify-content: space-between;">
					
						</div>
					</div>

				</div>
				<div class="numval"
					style="background-color: #f1f1f1;margin: 16rpx;height: 80rpx;text-align: center;align-items: center;display: flex;justify-content: center;font-size: 42rpx;">
					{{format(numbertext)}}
				</div>
				<div style="height: 400rpx;display: flex;flex-direction: row;background: #f2f3f5;">
					<div style="flex: 3;display: flex;flex-wrap: wrap;">
						<view class="keyboard_num" hover-stay-time="60" hover-class="keyboard_click"
							v-for="(item,index) in keynumber" @click="keyTap(item)"
							style="border-radius:{{bordradius}}; ">{{item}} </view>
					</div>

					<div style="flex: 1;display: flex;flex-direction: column;">
						<view @click="backSpace" style="flex: 1;background: white;" class="submitbt"
							hover-stay-time="60" hover-class="keyboard_click" data-value="cancle">
							<fui-icon name="backspace" :size="60"></fui-icon>
						</view>
						<view @click="keyTap('-')" style="flex: 1;background: white;" class="submitbt"
							hover-stay-time="60" hover-class="keyboard_click" data-value="cancle">
							<fui-icon color="black" name="minus" :size="60"></fui-icon>
						</view>
						<view @click="closePopup" style="flex: 1;background-color: #e98c8c;" class="submitbt"
							hover-stay-time="60" hover-class="keyboard_click" data-value="cancle">取消</view>
						<view @click="confirm" style="flex: 1;" class="submitbt" hover-stay-time="60"
							hover-class="keyboard_click" data-value="submit">提交</view>
					</div>
				</div>
				<fui-safe-area></fui-safe-area>
			</view>
		</fui-bottom-popup>
	</view>
</template>

<script>
	export default {
		name: "myKeyboard",
		data() {
			return {
				keynumber: '123456789:.0',
				numbertext: [],
				show: false,
				count: "1",
			};
		},
		emits: ['close'],
		props: {
			show: Boolean,
			subItem: Object
		},
		methods: {
			//调用此方法显示底部弹出层
			showPopup(type) {
				this.show = true
			},
			closePopup(type) {
				this.show = false;
				this.$emit('close', {});
				this.numbertext = [];
			},
			keyTap(key) {
				console.log(this.subItem);
				this.numbertext.push(key);

				uni.vibrateShort({
					success: () => {
						console.log('success');
					}
				});
			},
			format() {
				return this.numbertext.join('').replace(/^\./g, "").replace(".", "#").replace(/\./g, "").replace("#", ".")
					.replace("X", "*").replace(/\X/g, "").replace("*", "x");
			},
			backSpace() {
				this.numbertext.pop();
			},
			confirm() {
				
				setTimeout(() => {
					console.log("confirm");
					this.show = false;
					this.$emit('confirm', {
						value: this.format(),
						count: this.count
					});
					this.numbertext = [];
				}, 100)

			},
			getScoreByCount(count){
				if(this.subItem==null){
					return;
				}
				if(this.subItem.scoreList != null){
					for (var i = 0; i < this.subItem.scoreList.length; i++) {
						if(this.subItem.scoreList[i].count == count){
							return this.subItem.scoreList[i]
						}
					}
				}
			}
		}
	}
</script>

<style>
	/* 自定义内容区样式需自行控制 */
	.fui-custom__wrap {
		width: 100%;
		height: 220rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.fui-align__center {
		width: 100%;
		font-size: 16rpx;
		display: flex;
		align-items: center;
	}


	.keyboard_num {
		line-height: 20rpx;
		position: relative;
		flex: 1;
		flex-basis: 24%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: white;

		margin: 8rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
	}


	/* 点击选中样式 */
	.keyboard_click {
		background-color: gainsboro;
	}


	.deletebt {
		margin-bottom: 8rpx;
		border-radius: 5px;
		color: #fff;
		font-size: 12px;
		text-align: center;
		line-height: 40px;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.canclebt {
		margin-top: 8rpx;
		border-radius: 5px;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 40px;
		float: left;
		height: 40px;
		background: #e98c8c;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.submitbt {
		margin-top: 8rpx;
		margin-bottom: 8rpx;
		border-radius: 5px;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 40px;
		float: left;
		height: 40px;
		background: #1989fa;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.bt_select {
		background: rgb(51, 165, 241);
	}
</style>